@charset "UTF-8";
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v15-latin-regular.eot');
    /* IE9 Compat Modes */
    
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    
    url('../fonts/roboto-v15-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    
    url('../fonts/roboto-v15-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    
    url('../fonts/roboto-v15-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    
    url('../fonts/roboto-v15-latin-regular.svg#Roboto') format('svg');
    /* Legacy iOS */
}
/*  ----------------------------------------------------------------------------------------------------- */
body {
    margin: 0px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #20272a;
    font-family: 'Roboto', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #404C51;
    -webkit-font-smoothing: antialiased;
    font-size: 1em;
}

#layout-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #313b3f;
    border-right: solid 1px #151d21;
    overflow: hidden;
    width: 299px;
}

.layout-logo {
    height: 65px;
    display: block;
    padding: 15px 0 17px 0;
    z-index: 997;
    background-color: #313b3f;
    text-align: center;
}

.layout-logo img {
    height: 70px;
}

#layout-sidebar > a {
    width: 100%;
    height: 50px;
    display: block;
    padding: 15px 0px 0px 25px;
    cursor: pointer;
    border-top: solid 1px #404a4e;
    box-sizing: border-box;
}

#layout-sidebar> a.active-menuitem {
    background-color: #20282b !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#layout-sidebar > a:hover {
    background-color: #20282b;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#layout-sidebar > a img {
    width: 20px;
    height: auto;
    float: left;
}

#layout-sidebar > a span {
    color: #9ba5ac;
    font-size: 16px;
    margin: 0px 0px 0px 30px;
    display: block;
}

#layout-sidebar > div {
    width: auto;
    padding: 20px 15px;
    overflow: hidden;
    background-color: #20282b;
}

#layout-sidebar > div.submenuhide {
    overflow: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

#layout-sidebar > div.submenushow {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    max-height: 500px;
}

#layout-sidebar > div a {
    width: 50%;
    float: left;
    padding: 6px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 4homepapx;
    -webkit-border-radius: 4px;
    color: #659eb3;
    font-size: 14px;
}

#layout-sidebar > div a:hover {
    background-color: #101517;
    color: #8dc5d9;
}

#layout-content {
    margin-left: 300px;
    background-color: #FFFFFF;
}

.content-section {
    display: block;
    border-bottom: solid 1px #dde3e6;
    padding: 30px;
    overflow: hidden;
    background-color: #f5f7f8;
}

.content-section:first-of-type > div > span {
    line-height: 1.5em;
} 

.content-section h2 {
    margin-top: 0;
}

.feature-title {
    font-size: 30px;
    margin-bottom: 20px;
    display: block;
    color: #fca752;
}

#topbar {
    background-color: #1976D2;
    box-sizing: border-box;
    display: block;
    border-bottom: solid 1px #dde3e6;
    padding: 15px;
    overflow: hidden;
}

.topbar-link {
    float: right;
    width: 80px;
    text-align: center;
    padding: 10px 5px;
    border-radius: 5px;
    font-size: 12px;
    -webkit-border-radius: 5px;
    background-color: rgb(246, 249, 251);
    margin-left: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow: hidden;
    color:#313b3f;
}
.topbar-link:hover {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.topbar-link img {
    width: 80%;
    height: 30px;
}
/*
.PFGrayText {
    color: #aab7c1;
}
.PFDarkText {
    color: #313b3f;
}*/

#menu-button {
    float: left;
    padding: 10px 10px 5px 10px;
    border-radius: 5px;
    display: none;
}
#menu-button-mobile {
    float: left;
    padding: 10px 10px 5px 10px;
    border-radius: 5px;
    display: none;
}
#menu-button.active,
#menu-button:hover,
#menu-button:focus,
#menu-button-mobile:hover,
#menu-button-mobile:focus {
    background-color: #2F88E0;
}
#menu-button img,
#menu-button-mobile img {
    width: 30px;
    height: 25px;
}

.property-box {
    height: 280px;
    float: left;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
}
.property-box img {
    width: 60%;
}
.property-box .property-topic {
    display: block;
    color: #25aae1;
    font-size: 18px;
    margin-bottom: 10px;
}
.property-box .property-text {
    display: block;
    color: #414D52;
    font-size: 14px;
    line-height: 22px;
}

.footer {
    font-size: 14px;
    color: #84939f;
}
.footer span:last-child {
    float: right;

}

/** ThemeSwitcher **/
#GlobalThemeSwitcher {
    display: block;
    text-align: left;
    width: 200px;
    max-height: 400px;
    overflow-y: auto;
    background-color: #eff3f6;
    border: solid 1px #bcc7cf;
    z-index: 99999999999;
    position: absolute;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    margin-left: -60px;
}
#GlobalThemeSwitcher  a {
    display: block;
    padding: 10px;
    border-bottom: solid 1px #dde3e7;
    text-align: left;
    color: #87939B;
    overflow: hidden;
}
#GlobalThemeSwitcher  a:hover {
    color: #fdd106;
}
#GlobalThemeSwitcher  a span.ui-theme {
    width: 30px;
    height: 27px;
    float: left;
    border: solid 1px #D7DCE0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#GlobalThemeSwitcher  a img {
    float: left;
    width: 30px;
    height: 27px;
}
#GlobalThemeSwitcher  a span.ui-text {
    display: inline-block;
    margin-top: 7px;
    margin-left: 10px;
    font-size: 14px;
}
#GlobalThemeSwitcher  > span {
    font-size: 18px;
    display: inline-block;
    margin: 20px 0 0 9px;
}

.topbar-link {
    display: block
}

.mobile-logo {
    display: none;
}

/* cursor */
.cursorPointer {
    cursor: pointer;
}

/* OTHERS */
a {
    text-decoration: none;
    color: #25AAE1
}
.intro-text {
    font-size: 16px;
    color: #404C51;
    line-height: 24px;
}
.intro-title {
    font-size: 46px;
    color: #DB2226;
    line-height: 46px;
    padding: 10px 0px 10px 0px;
}
/* buttons */
.intro-btn {
    width: 100%;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
    transition: background-color .3s;
}

.download-btn {
    background-color: #ffd100;
    color: #404c51;
}

.download-btn:hover {
    background-color: #ffda32;
}

.download-btn:active {
    background-color: #e5bc00;
}

.github-btn {
    background-color: #404c51;
    color: #f8f8f8;
}

.github-btn:hover {
    background-color: #666f73;
}

.github-btn:active {
    background-color: #333c40;
}

.prosupport-btn {
    color: #f8f8f8;
    background-color: #26a9e0;
}

.prosupport-btn:hover {
    background-color: #51bae6;
}

.prosupport-btn:active {
    background-color: #1e87b3;
}

/* text colors */
.orange {
    color: #fca752;
}
.gray {
    color: #84939f;
}
.pink {
    color: #e26e61;
}
.yellow {
    color: #fdd106;
}
.green {
    color: #39b54a;
}
.blue {
    color: #25aae1;
}
.subitem {
    color: #84939f;
}
.fixedTop {
    position: fixed !important;
    margin-top: 0 !important;
}
.animated {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
input.searchInput {
    padding-left: 30px;
}

/** ClearFix **/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* required comment for clearfix to work in Opera \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}

.implementation {
    background-color: #FFFFFF;
    overflow: visible;
}
.implementation > h3 {
    margin-top: 30px;
    color: #5C666A;
}
.implementation h3.first {
    margin-top: 0px !important;
}
.implementation h4 {
    color: #5C666A;
}

.SubSubMenu {
    padding: 15px 30px;
}
.SubSubMenu ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.SubSubMenu ul li {
    list-style: none;
    width: 20%;
    float: left;
    margin-top: 5px;
}
.SubSubMenu ul li a:hover {
    color: #fdd106
}

/* Source Section */
.source .ui-tabview-panel {
    color: #404C51 !important;
}
.source h3 {
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 24px;
    font-weight: normal;
}
.source h4 {
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 20px;
    font-weight: normal;
}
.source p {
    font-size: 16px;
    line-height: 24px;
    margin: 10px 0;
    opacity: .90;
}
.source .doc-tablewrapper {
    margin: 10px 0;
}
.source a {
    color: #0273D4;
}
/* Tabs Source */
.source .ui-tabview {
    background: none;
    border: 0 none;
    color: #5C666A;
    font-weight: lighter;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    border-radius: 4px !important;
}
.source .ui-tabview .ui-tabview-nav {
    background: #1976D2 !important;;
    margin-bottom: -1px;
    padding: 3px 3px 0px 3px !important;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 4px !important;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.source .ui-tabview .ui-tabview-nav li,
.source .ui-tabview .ui-tabview-nav li.ui-state-hover {
    border: 0px none !important;
    background: #3F94E9 !important;;
    border-color: #3F94E9 !important;;
    box-shadow: none !important;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 4px !important;
}
.source .ui-tabview .ui-tabview-nav li a {
    padding: .5em 1em !important;
}
.source .ui-tabview .ui-tabview-nav li.tab-doc {
    margin-right: 0;
}
.source .ui-tabview .ui-tabview-nav li.ui-state-default a {
    color: #fff !important;
    font-weight: normal !important;
    text-shadow: none ;
}
.source .ui-tabview .ui-tabview-nav li.ui-state-active a {
    color: #5C666A !important;
    font-weight: normal !important;
}
.source .ui-tabview .ui-tabview-nav li.ui-state-hover {
    box-shadow: none !important;;
}
.source .ui-tabview .ui-tabview-nav li.ui-tabview-selected {
    background: #F5F6F7 !important;
}
.source .ui-tabview .ui-tabview-panels {
    border-top: 1px solid #F5F6F7 !important;;
    color: #5C666A !important;
    background: #F5F6F7;
}
.source .ui-tabview.ui-tabview-top > .ui-tabview-nav li {
    top: 0px !important;
}

/* Docs Table */
.doc-table {
    border-collapse: collapse;
    width: 100%;
}
.doc-table th {
    background-color: #dae8ef;
    color: #404C51;
    border: solid 1px #C1D5DF;
    padding: 5px;
    font-size: 16px;
    text-align: left;
}
.doc-table tbody td {
    color: #404C51;
    padding: 4px 10px;
    border: 1px solid #E5EBF0;
    font-size: 15px;
    opacity: .90;
}
.doc-table tbody tr:nth-child(even) {
    background-color: #FBFCFD;
}
.doc-table tbody tr:nth-child(odd) {
    background-color: #F3F6F9;
}

@media (min-width: 1025px) {
    .home-logo {
        width: 100%;
    }
}

@media screen and (max-width: 64em) {
    .home-logo {
        width: 340px;
    }
    
    .topbar-link {
        display: none
    }
    .mobile-logo {
        display: block;
        float: right;
        margin-top: 6px;
    }
    .mobile-logo img {
        height: 30px;
    }
    #layout-sidebar {
        display: none;
        overflow-y: auto;
        z-index: 999;
    }
    #layout-sidebar.active {
        display: block;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 999;
    }
    .layout-logo {
        padding: 15px;
        height: 68px;
        box-sizing: border-box;
    }
    .layout-logo .sidebar-logo {
        display: none;
    }

    #layout-content {
        margin-left: 0
    }
    .content-section {
        padding: 14px 24px;
    }
    #menu-button {
        display: inline-block;
        border-radius: 5px;
        position: relative;
        z-index: 1000;
    }
    #menu-button.active {
        display: none;
    }
    #menu-button-mobile.active {
        display: inline-block;
        background-color: #1976D2;
    }
    #menu-button:hover,
    #menu-button:focus,
    #menu-button-mobile:hover,
    #menu-button-mobile:focus {
        background-color: #2F88E0;
    }

    .ui-tabview.ui-tabview-top > .ui-tabview-nav li {
        width: 100%;
    }
    .BigButton {
        width: 100%;
    }
    .SubSubMenu ul li {
        width: 50%
    }
    .property-box img {
        width: 40%;
    }
}

@media (max-width: 768px) {
    .doc-table tbody td {
        word-break: break-word;
    }
}

/* Themes */
.ui-theme {
    background: url("../images/themes.png") no-repeat top left;
    display: block;
}
.ui-theme.ui-theme-afterdark {
    background-position: 0 0;
    width: 30px;
    height: 25px;
}
.ui-theme.ui-theme-afternoon {
    background-position: 0 -75px;
    width: 30px;
    height: 25px;
}
.ui-theme.ui-theme-afterwork {
    background-position: 0 -150px;
    width: 30px;
    height: 25px;
}
.ui-theme.ui-theme-aristo {
    background-position: 0 -225px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-black-tie {
    background-position: 0 -302px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-blitzer {
    background-position: 0 -379px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-bluesky {
    background-position: 0 -456px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-bootstrap {
    background-position: 0 -533px;
    width: 30px;
    height: 26px;
}
.ui-theme.ui-theme-casablanca {
    background-position: 0 -609px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-cruze {
    background-position: 0 -686px;
    width: 30px;
    height: 25px;
}
.ui-theme.ui-theme-cupertino {
    background-position: 0 -761px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-dark-hive {
    background-position: 0 -838px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-delta {
    background-position: 0 -915px;
    width: 30px;
    height: 30px;
}
.ui-theme.ui-theme-dot-luv {
    background-position: 0 -995px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-eggplant {
    background-position: 0 -1072px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-excite-bike {
    background-position: 0 -1149px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-flick {
    background-position: 0 -1226px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-glass-x {
    background-position: 0 -1303px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-home {
    background-position: 0 -1380px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-hot-sneaks {
    background-position: 0 -1457px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-humanity {
    background-position: 0 -1534px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-le-frog {
    background-position: 0 -1611px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-midnight {
    background-position: 0 -1688px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-mint-choc {
    background-position: 0 -1765px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-omega {
    background-position: 0 -915px;
    width: 30px;
    height: 30px;
}
.ui-theme.ui-theme-overcast {
    background-position: 0 -1842px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-pepper-grinder {
    background-position: 0 -1919px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-redmond {
    background-position: -80px 0;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-rocket {
    background-position: -80px -77px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-sam {
    background-position: -80px -154px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-smoothness {
    background-position: -80px -231px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-south-street {
    background-position: -80px -308px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-start {
    background-position: -80px -385px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-sunny {
    background-position: -80px -462px;
    width: 30px;
    height: 25px;
}
.ui-theme.ui-theme-swanky-purse {
    background-position: -80px -537px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-trontastic {
    background-position: -80px -614px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-ui-darkness {
    background-position: -80px -691px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-ui-lightness {
    background-position: -80px -768px;
    width: 30px;
    height: 27px;
}
.ui-theme.ui-theme-vader {
    background-position: -80px -845px;
    width: 30px;
    height: 27px;
}

/* Code Styles */
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    font-family: Courier, 'New Courier', monospace;
    font-size: 14px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 1em;
    background-color: #CFD8DC;
    color: #404C51;
    margin: 10px 0px;
}
.ui-tabview-left > .ui-tabview-nav {
    height: 150px;
}
.col-button {
    width: 10%;
    text-align: center;
}
.col-icon {
    width: 38px;
    text-align: center;
}

.whouses {
    background: #ffffff;
}

.whouses img {
    width: 100%;
}